<template>
    <g :class="`checked-rect ${attr.lock?'rect-lock':'rect'}`" v-if="attr.checked">
        <rect class="left-top" @mousedown="(event)=>{ this.itemMouseDown('left-top',event); }" :x="attr.x" :y="attr.y" width="6" height="6"></rect>
        <rect class="top" @mousedown="(event)=>{ this.itemMouseDown('top',event); }" :x="attr.x+attr.width/2-3" :y="attr.y" width="6" height="6"></rect>
        <rect class="right-top"  @mousedown="(event)=>{ this.itemMouseDown('right-top',event); }" :x="attr.x+attr.width-6" :y="attr.y" width="6" height="6"></rect>
        <rect class="right"  @mousedown="(event)=>{ this.itemMouseDown('right',event); }" :x="attr.x+attr.width-6" :y="attr.y+attr.height/2-3" width="6" height="6"></rect>
        <rect class="right-bottom" @mousedown="(event)=>{ this.itemMouseDown('right-bottom',event); }" :x="attr.x+attr.width-6" :y="attr.y+attr.height-6" width="6" height="6"></rect>
        <rect class="bottom" @mousedown="(event)=>{ this.itemMouseDown('bottom',event); }" :x="attr.x+attr.width/2-3" :y="attr.y+attr.height-6" width="6" height="6"></rect>
        <rect class="left-bottom" @mousedown="(event)=>{ this.itemMouseDown('left-bottom',event); }"  :x="attr.x" :y="attr.y+attr.height-6" width="6" height="6"></rect>
        <rect class="left" @mousedown="(event)=>{ this.itemMouseDown('left',event); }" :x="attr.x" :y="attr.y+attr.height/2-3" width="6" height="6"></rect>
    </g>
</template>
<script>
export default {
    props:{
        attr:{type:Object,default:()=>{ 
            return {x:0,y:0,width:20,height:20,checked:false};
        }},
    },
    methods:{
        itemMouseDown:function(resizeType,event){
            if(this.attr.lock) return;
            this.$emit('resizeDown',resizeType)
            if(event) {
				event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
			}
        }
    }
}
</script>
<style scoped lang="scss">
.rect rect{
    fill: #ff0000;
}

.rect-lock rect{
    fill: #a19f9f;
}

.checked-rect rect {    
    opacity: 1;
}

.checked-rect rect.top {
    cursor: n-resize;
}
	
.checked-rect rect.left-top {
    cursor: nw-resize;
}

.checked-rect rect.right-top {
    cursor: ne-resize;
}

.checked-rect rect.right {
    cursor: e-resize;
}

.checked-rect rect.right-bottom {
    cursor: se-resize;
}

.checked-rect rect.bottom {
    cursor: s-resize;
}

.checked-rect rect.left-bottom {
    cursor: sw-resize;
}

.checked-rect rect.left {
    cursor: w-resize;
}
</style>